<extend name="./Public/templete/base.html" />

<block name="title">
	<title>Personal</title>
</block>

<block name="link">
	<link rel="stylesheet" href="../../../Public/source/layui/css/layui.css" />
	<style type="text/css">
		* {
			margin: 0px;
		}
		
		.layui-table {
			margin-top: 4%;
			margin-left: 30%;
			width: 35%;
		}

		tr {
			border-bottom: 1px solid #c2c2c2;
		}
		
		.edit {
			margin-left: 60%;
			margin-top: 2%;
		}
		
		tr:hover {
			border-bottom: 0px;
		}
		
		.header {
			color: #ffffff;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
			height: 50px;
			margin-top: 10px;
			background-color: #393D49;
		}
	</style>
</block>

<block name="content">
	<div class="layui-body">
		<div style="padding: 15px;">
			<div class="header">
				<b>个人信息</b>
			</div>
			<table lay-skin="nob" lay-size="lg" class="layui-table">
				<colgroup>
					<col span=1 width="10%">
					<col span=1 width="50%">
				</colgroup>
				<tbody>
					<tr>
						<td>学号:</td>
						<td id="num"></td>
					</tr>
					<tr>
						<td>姓名:</td>
						<td id="name"></td>
					</tr>
					<tr>
						<td>性别:</td>
						<td id="sex"></td>
					</tr>
					<tr>
						<td>组别:</td>
						<td id="group"></td>
					</tr>
					<tr>
						<td>班级:</td>
						<td id="class"></td>
					</tr>
					<tr>
						<td>学院:</td>
						<td id="college"></td>
					</tr>
					<tr>
						<td>权限:</td>
						<td id="power"></td>
					</tr>
				</tbody>
			</table>
			<div class="edit">
				<button onclick="edit()" class="layui-btn">编辑</button>
			</div>
		</div>
	</div>
</block>

<block name="js">
	<script type="text/javascript" src="../../../Public/source/layui/layui.js"></script>
	<script type="text/javascript" src="../../../Public/source/layui/layui.all.js"></script>
	<script type="text/javascript" src="../../../Public/source/jquery-1.11.3.js"></script>
	<script>
		$(function() {
			var num1 = document.getElementById("num");
			var name1 = document.getElementById("name");
			var sex1 = document.getElementById("sex");
			var class1 = document.getElementById("class");
			var college1 = document.getElementById("college");
			var power1 = document.getElementById("power");
			var group1 = document.getElementById("group");
			$.ajax({
				async: true,
				type: 'post',
				dataType: 'json',
				url: '__URL__/getSelf', //后台提供接口
				data: {},
				success: function(data) {

					if(data.status > 0) {
						num1.innerHTML = data.num;
						name1.innerHTML = data.name;
						sex1.innerHTML = data.sex;
						class1.innerHTML = data.class;
						college1.innerHTML = data.school;
						power1.innerHTML = data.status;
						group1.innerHTML = data.group;

					} else {
						alert(data.info);
					}
				},
				error: function(data) {
					alert('error')
				}
			});
		});

		function edit() {
			layui.use('layer', function() {
				var layer = layui.layer;

				layer.open({
					title: ['修改信息'],
					type: 2,
					anim: 0,
					skin: 'layui-layer-rim', //加上边框
					area: ['500px', '90%'], //宽高
					content: 'showAlterSelf'
				});
			});
		}
	</script>
</block>